<template>
  <div class="cube">
    <div class="types">
      <el-segmented v-model="value" :options="options" size="large" />
    </div>
    <div>
      <div v-if="value == '三阶基础'"></div>
      <div v-if="value == 'CFOP'" class="cfop">
        <el-segmented v-model="type" :options="cfops" size="large"/>
        <f2l v-if="type == 'f2l'" />
        <oll v-else-if="type == 'oll'" />
        <pll v-else-if="type == 'pll'" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import f2l from './f2l.vue'
import oll from './oll.vue'
import pll from './pll.vue'
const options = ['三阶', '二阶', '四阶', '五阶', 'CFOP']
const cfops = ['f2l', 'oll', 'pll']
const value = ref('三阶基础')
const type = ref('f2l')

</script>
<style scoped lang="scss">
.cfop{
  margin: 5px;
}
</style>
